import userEvent from '@testing-library/user-event'
import React,{useEffect,useState} from 'react'
import { Button, Space, Swiper, Toast } from 'antd-mobile'
import styles from './index.mobules.css'
import { DemoBlock, DemoDescription } from 'demos'
export default function Index() {
  const [colors, setColor] = useState([])
  useEffect(()=>{
    setColor(
      ['#ace0ff', '#bcffbd', '#e4fabd', '#ffcfac']
    )
  },[])
  const items = colors.map((color, index) => (
    <Swiper.Item key={index}>
      <div className={styles.content} style={{ background: color }}>
        {index + 1}
      </div>
    </Swiper.Item>
  ))
  return (
    <div>
      <DemoBlock title='卡在边界'>
        <Swiper
          trackOffset={10}
          slideSize={80}
          style={{
            '--border-radius': '8px',
          }}
          defaultIndex={0}
        >
          {items}
        </Swiper>
      </DemoBlock>
    </div>
  )
}
